<template>
  <div class="center">
    <!-- 头部 -->
    <div class="table_header flex flex_bet flex-wrap">
      <div class="table_button">
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="Refresh"></el-button>
        <el-button type="primary" size="mini" @click="exportAccount()">导出</el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="toPassOn">账号转交</el-button>
        <el-button type="primary" icon="el-icon-delete-solid" size="mini" @click="toWithDraw">账号回收</el-button>
      </div>
      <div class="table_searchs flex felx_align">
        <div class="table_search flex">
          <el-input placeholder="搜索" v-model="searchTable" class="input-with-select" size="small">
            <el-select v-model="select" slot="prepend" placeholder="请选择" class="table_select" style="width:105px">
              <el-option label="归属" value="1"></el-option>
              <el-option label="学习套餐" value="2"></el-option>
              <el-option label="状态" value="3"></el-option>
              <el-option label="UID" value="4"></el-option>
              <el-option label="账号(电话)" value="5"></el-option>
              <el-option label="姓名" value="6"></el-option>
              <el-option label="备注" value="7"></el-option>
              <el-option label="学校" value="8"></el-option>
              <el-option label="班级" value="9"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="idnameSearch"></el-button>
          </el-input>
        </div>
        <dynamicTable :checkboxVal="checkboxVal" @alter="alterCheckbok"/>
      </div>
    </div>
    <el-table stripe style="width: 100%" border fit highlight-current-row ref="tableDataRef" :data="tableData" :key="key">
      <el-table-column v-if="colData[0].istrue" width="50" align="center" prop="id" label="ID" fixed></el-table-column>
      <el-table-column v-if="colData[1].istrue" width="70" align="center" prop="adminName" label="归属" fixed></el-table-column>
      <el-table-column v-if="colData[2].istrue" width="90" align="center" prop="platter" label="学习套餐" fixed></el-table-column>
      <el-table-column v-if="colData[3].istrue" width="120" align="center" prop="phone" label="账号电话" fixed></el-table-column>
      <el-table-column v-if="colData[4].istrue" width="120" align="center" prop="qid" label="QID" fixed></el-table-column>
      <el-table-column v-if="colData[5].istrue" width="80" align="center" prop="uid" label="UID" fixed></el-table-column>
      <el-table-column v-if="colData[6].istrue" align="center" prop="status" label="状态"></el-table-column>
      <el-table-column v-if="colData[7].istrue" width="140" align="center" prop="startTime" label="领用时间">
      </el-table-column>
      <el-table-column v-if="colData[8].istrue" width="140" align="center" prop="active_time" label="激活时间">
      </el-table-column>
      <el-table-column v-if="colData[9].istrue" width="140" align="center" prop="expire_time" label="到期时间">
      </el-table-column>
      <el-table-column v-if="colData[10].istrue" width="140" align="center" prop="login_time" label="最后登录日期">
      </el-table-column>
      <el-table-column v-if="colData[11].istrue" width="120" align="center" prop="login_sn" label="最后登录设备sn"></el-table-column>
      <el-table-column width="120" align="center" prop="login_num" label="登录次数"></el-table-column>
      <el-table-column width="120" align="center" prop="school" label="校区"></el-table-column>
      <el-table-column width="120" align="center" prop="class" label="班级"></el-table-column>
      <el-table-column v-if="colData[12].istrue" align="center" prop="username" label="姓名"></el-table-column>
      <el-table-column v-if="colData[13].istrue" align="center" prop="sex" label="性别">
        <template slot-scope="scope">
          <span v-if="scope.row.sex==1">男</span>
          <span v-else>女</span>
        </template>
      </el-table-column>
      <el-table-column v-if="colData[14].istrue" align="center" prop="gradeName" label="年级"></el-table-column>
      <el-table-column v-if="colData[15].istrue" align="center" prop="address" show-overflow-tooltip label="详细地址"></el-table-column>
      <el-table-column v-if="colData[16].istrue" align="center" prop="remark" show-overflow-tooltip label="备注"></el-table-column>
      <el-table-column label="操作" min-width="300" align="center">
        <template slot-scope="scope">
          <el-row>
            <el-button size="mini" type="primary" @click="openEdit(scope.row)">编辑</el-button>
            <el-button v-permission="['超级管理员']" size="mini" @click="delContent(scope.row.id)">删除</el-button>
            <el-button @click="downloadQrCode(scope.row)" size="mini">二维码</el-button>
            <el-button @click="goToGanKao(scope.row.uid)" size="mini">学情</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="paging">
      <el-pagination :current-page.sync="listQuery.startSize" background @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :page-sizes="[10, 50, 100, 200]"
                     layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size="listQuery.pageSize">
      </el-pagination>
    </div>
    <!-- 添加弹窗 -->
    <el-dialog title="编辑学习卡账号信息" :visible.sync="formVisible" :close-on-click-modal="false" :close-on-press-escape="false" width="40%" @close="editFormClose">
      <el-form :model="editForm" ref="ruleForm" :rules="rules" class="diolog_adapt" style="width: 600px">
        <div class="flex">
          <el-form-item label="归属" label-width="120px" class="addform_headers" prop="adminName">
            <el-input v-model="editForm.adminName" autocomplete="off" class="add_select" placeholder="自动生成，请勿手动修改" disabled></el-input>
          </el-form-item>
          <el-form-item label="学习套餐" label-width="120px" class="addform_headers" prop="platter">
            <el-input v-model="editForm.platter" autocomplete="off" class="add_select" placeholder="自动生成，请勿手动修改" disabled></el-input>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="账号(电话)" label-width="120px" class="addform_headers" prop="phone">
            <el-input v-model="editForm.phone" autocomplete="off" class="add_select" placeholder="自动生成，请勿手动修改" disabled></el-input>
          </el-form-item>
          <el-form-item label="状态" label-width="120px" class="addform_headers" prop="status">
            <el-input v-model="editForm.status" autocomplete="off" class="add_select" placeholder="自动生成，请勿手动修改" disabled></el-input>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="QID" label-width="120px" class="addform_headers" prop="qid">
            <el-input v-model="editForm.qid" autocomplete="off" class="add_select" disabled></el-input>
          </el-form-item>
          <el-form-item label="UID" label-width="120px" class="addform_headers" prop="uid">
            <el-input v-model="editForm.uid" autocomplete="off" class="add_select" placeholder="自动生成，请勿手动修改" disabled></el-input>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="领用日期" label-width="120px" class="addform_headers" prop="startTime">
            <el-input v-model="editForm.startTime" autocomplete="off" class="add_select" placeholder="自动生成，请勿手动修改" disabled></el-input>
          </el-form-item>
          <el-form-item label="激活日期" label-width="120px" class="addform_headers" prop="active_time">
            <el-input v-model="editForm.active_time" autocomplete="off" class="add_select" placeholder="自动生成，请勿手动修改" disabled></el-input>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="到期日期" label-width="120px" class="addform_headers" prop="expire_time">
            <el-input v-model="editForm.expire_time" autocomplete="off" class="add_select" placeholder="自动生成，请勿手动修改" disabled></el-input>
          </el-form-item>
          <el-form-item label="最后登录日期" label-width="120px" class="addform_headers" prop="login_time">
            <el-input v-model="editForm.login_time" autocomplete="off" class="add_select" placeholder="自动生成，请勿手动修改" disabled></el-input>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="最近登录设备sn" label-width="120px" class="addform_headers" prop="login_sn">
            <el-input v-model="editForm.login_sn" autocomplete="off" class="add_select" placeholder="自动生成，请勿手动修改" disabled></el-input>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="姓名:" label-width="120px" class="addform_headers" prop="username">
            <el-input v-model="editForm.username"></el-input>
          </el-form-item>
          <el-form-item label="性别:" label-width="120px" class="addform_headers" prop="sex">
            <el-select v-model="editForm.sex" placeholder="请选择">
              <el-option label="男" :value="1"></el-option>
              <el-option label="女" :value="-1"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="校区:" label-width="120px" class="addform_headers">
            <el-input v-model="editForm.school"></el-input>
          </el-form-item>
          <el-form-item label="年级:" label-width="120px" class="addform_headers" prop="grade">
            <el-select v-model="editForm.grade" placeholder="请选择">
              <el-option
                v-for="item in gradeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="班级:" label-width="120px" class="addform_headers" prop="sex">
            <el-input v-model="editForm.class"></el-input>
          </el-form-item>
          <el-form-item label="详细地址:" label-width="120px" class="addform_headers" prop="address">
            <el-input v-model="editForm.address"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="备注" label-width="120px" prop="remark">
          <el-input v-model="editForm.remark" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="120px" prop="password">
          <el-input v-model="editForm.password" minlength="1" maxlength="6"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formVisible = false" size="mini" round>取 消</el-button>
        <el-button type="primary" @click="editAccountData('ruleForm')" size="mini" round>确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="二维码" :visible.sync="showQrCode" width="40%" @close="qrCodeFormClose">
      <el-card>
        <div class="qrcode_box">
          <canvas id="canvas" ref="qrcodeCanvas" class="qrcode"></canvas>
        </div>
        <div class="flex_center">
          <div class="col">
            <div class="flex_center" style="width: 100px">
              <el-image style="width: 30px;height: 30px" src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/school.svg"></el-image>
              <div style="padding-left: 5px">校区:</div>
            </div>
            <div>{{ qrCodeForm.school }}</div>
          </div>
        </div>
        <div class="flex_center">
          <div class="col">
            <div class="flex_center" style="width: 100px">
              <el-image style="width: 30px;height: 30px" src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/name.svg"></el-image>
              <div style="padding-left: 5px">姓名:</div>
            </div>
            <div>{{ qrCodeForm.username }}</div>
          </div>
        </div>
        <div class="flex_center">
          <div class="col">
            <div class="flex_center" style="width: 100px">
              <el-image style="width: 30px;height: 30px" src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/QID.svg"></el-image>
              <div style="padding-left: 5px">QID:</div>
            </div>
            <div>{{ qrCodeForm.qid }}</div>
          </div>
        </div>
        <div class="flex_center">
          <div class="col">
            <div class="flex_center" style="width: 100px">
              <el-image style="width: 30px;height: 30px" src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/account.svg"></el-image>
              <div style="padding-left: 5px">账号:</div>
            </div>
            <div>{{ qrCodeForm.account }}</div>
          </div>
        </div>
      </el-card>
    </el-dialog>

    <el-dialog :title="exchangeForm.type === 1 ? '账号转交' : '账号回收'" :visible.sync="loadFormVisible" @close="exchangeFormClose" :close-on-click-modal="false" :close-on-press-escape="false" width="35%">
      <el-form :model="exchangeForm"  ref="exchangeForm">
        <el-form-item v-if="exchangeForm.type===1" label="变更用户" label-width="100px" prop="username">
          <el-select v-model="exchangeForm.username" placeholder="请选择变更用户" filterable>
            <el-option v-for="(item,index) in childrenOption" :key="index" :label="item.username" :value="item.username"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="exchangeForm.type===1" label="账号" label-width="100px" prop="account">
          <el-select v-model="exchangeForm.account" placeholder="请选择账号" filterable multiple>
            <el-option v-for="(item,index) in accountOptions" :key="item.id" :label="item.phone" :value="item.phone"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="exchangeForm.type===2" label="账号" label-width="100px" prop="phone">
          <el-input v-model="exchangeForm.phone" style="width: 200px" placeholder="请输入账号"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="loadFormVisible = false" size="mini" round>取 消</el-button>
        <el-button type="primary" @click="toExchange" size="mini" round>确 定</el-button>
      </div>
    </el-dialog>

    <delete-Dialog title="" :visible.sync="deleteDialogs.show" width="25%" top="40vh" @deleteEvents="deleteEvents" :deleteText="deleteDialogs.deleteText"/>
    <div v-if="reportVisible" class="modal">
      <div class="modal-content">
        <span @click="reportVisible = false" class="close">&times;</span>
        <iframe :src="reportUrl" width="100%" height="100%" frameborder="0"></iframe>
      </div>
    </div>
  </div>
</template>

<script>
import objectable from "@/utils/objectable.js";
import dynamicTable from "@/components/DynamicTable/index";
import deleteDialog from "@/components/deleteDialog/index";
import tableMini from '@/utils/tableMini.js'
import {
  getChildAdmin, queryAccount, editAccount, deleteAccount, exportAccount
} from "@/api/launcherMade";
import {getAscription, getBatchTwo} from "@/api/equipment";
import {Loading} from "element-ui";
import permission from "@/directive/permission";
import QRCode from 'qrcode'
import crypto from 'crypto'
import UploadExcelComponent from "@/components/UploadExcelSn/index.vue";
import {exchangePhoneAccount, getAccountOptions} from "@/api/qid";

export default {
  mixins: [tableMini],
  components: {UploadExcelComponent, dynamicTable, deleteDialog},
  directives: {permission},
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '' || value.length !== 6) {
        callback(new Error('请输入6位密码'))
      } else {
        callback()
      }
    };
    return {
      key: 1,
      colData: [], //动态控制table
      checkboxVal: ["ID", "归属", "学习套餐", "账号(电话)", "QID", "UID", "状态", "领用时间", "激活时间", "到期时间", "最后登录日期", "最后登录设备", "姓名", "性别", "年级", "详细地址", "备注"],
      searchTable: "",
      select: "", //搜索条件
      tableData: [],
      listQuery: {
        startSize: 1,
        pageSize: 10,
        userId: localStorage.getItem("ID"),
      },
      editForm: {
        adminName: '',
        platter: '',
        phone: '',
        status: '',
        qid: '',
        uid: '',
        startTime: '',
        active_time: '',
        expire_time: '',
        login_time: '',
        login_sn: '',
        username: '',
        sex: '',
        school: '',
        grade: '',
        class: '',
        address: '',
        remark: '',
        password: '',
      },
      formVisible: false,
      rules: {
        password: [{validator: validatePass, trigger: 'blur'}],
        username: [{required: true, message: '请输入姓名', trigger: 'change'}]
      },
      editSubjects: false,
      deleteDialogs: {show: false, deleteText: '', deleteId: 0},
      childrenOption: [],  //子账号可选框
      batchArr: [],
      platter_id: this.$route.query.platter_id,
      gradeOptions: [
        {label: '一年级', value: 1}, {label: '二年级', value: 2}, {label: '三年级', value: 3}, {
          label: '四年级',
          value: 4
        },
        {label: '五年级', value: 5}, {label: '六年级', value: 6}, {label: '七年级', value: 7}, {
          label: '八年级',
          value: 8
        },
        {label: '九年级', value: 9}, {label: '高一', value: 10}, {label: '高二', value: 11}, {label: '高三', value: 12},
      ],
      showQrCode: false,
      qrCodeForm: {
        school: '',
        username: '',
        qid: '',
        account: ''
      },
      reportVisible: false,
      reportUrl: '',
      exchangeForm: {
        username: '',
        account: '',
        phone: '',
        type: 1, //1：账号移交 2：账号回收
      },
      loadFormVisible: false,
      accountOptions: [],
    }
  },
  created() {
    this.colData = objectable(this.checkboxVal, this.checkboxVal); //转为数组对象，好控制table
    this.queryAccountData()
    this.getBatchTwo()
    this.getChildAdmin()
    this.getAccountOptionControl()
  },
  methods: {
    Refresh() {
      this.listQuery = {
        startSize: 1,
        pageSize: 10,
        userId: localStorage.getItem("ID"),
        platter: undefined,
        status: undefined,
        uid: undefined,
        phone: undefined,
        username: undefined,
        remark: undefined
      }
      this.queryAccountData()
    },
    getBatchTwo() {
      getBatchTwo({userId: localStorage.getItem("ID")}).then(res => {
        this.batchArr = res.data
      }).catch(err => {
        this.batchArr = []
      })
    },
    getChildAdmin() {
      getChildAdmin({userId: localStorage.getItem("ID")}).then(res => {
        this.childrenOption = res.data
      }).catch(err => {
        this.childrenOption = []
      })
    },
    //搜索,1:课程名称
    idnameSearch() {
      this.listQuery = {
        startSize: 1,
        pageSize: 10,
        userId: localStorage.getItem('ID')
      }
      if (!this.select) return this.$message.warning("请先选择查询条件");
      switch (this.select) {
        case '1':
          this.listQuery.adminName = this.searchTable
          this.queryAccountData();
          break;
        case '2':
          this.listQuery.platter = this.searchTable
          this.queryAccountData();
          break;
        case '3':
          this.listQuery.status = this.searchTable
          this.queryAccountData();
          break;
        case '4':
          this.listQuery.uid = this.searchTable
          this.queryAccountData();
          break;
        case '5':
          this.listQuery.phone = this.searchTable
          this.queryAccountData();
          break;
        case '6':
          this.listQuery.username = this.searchTable
          this.queryAccountData();
          break;
        case '7':
          this.listQuery.remark = this.searchTable
          this.queryAccountData();
          break;
        case '8':
          this.listQuery.school = this.searchTable
          this.queryAccountData();
          break;
        case '9':
          this.listQuery.class = this.searchTable
          this.queryAccountData();
          break;
      }
    },
    exportAccount() {
      let loadingInstance = Loading.service({target: '.content2'})
      exportAccount(this.listQuery).then(res => {
        window.open('https://' + res.data.url)
        this.$nextTick(() => {
          loadingInstance.close();
        });
      }).catch(err => {
        this.$nextTick(() => {
          loadingInstance.close();
        });
        err.code == 400 ? this.$message.error(err.msg) : ''

      })
    },
    openEdit(row) {
      this.formVisible = true
      this.editSubjects = true
      this.editForm = {
        adminName: row.adminName,
        platter: row.platter,
        phone: row.phone,
        status: row.status,
        qid: row.qid,
        uid: row.uid,
        startTime: row.startTime,
        active_time: row.active_time,
        expire_time: row.expire_time,
        login_time: row.login_time,
        login_sn: row.login_sn,
        username: row.username,
        sex: row.sex,
        grade: row.grade,
        address: row.address,
        remark: row.remark,
        password: row.password,
        id: row.id,
        school: row.school,
        class: row.class
      }
    },
    editAccountData(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let editForm = {
            username: this.editForm.username,
            sex: this.editForm.sex,
            grade: this.editForm.grade,
            address: this.editForm.address,
            remark: this.editForm.remark,
            password: this.editForm.password,
            school: this.editForm.school,
            class: this.editForm.class,
            id: this.editForm.id,
            userId: localStorage.getItem("ID"),
            last_ip: sessionStorage.getItem("Ip")
          }
          editAccount(editForm).then(res => {
            this.$message.success(res.msg)
            this.queryAccountData()
            this.formVisible = false
          }).catch(err => {
          })
        } else {
          return false;
        }
      });
    },
    queryAccountData() {
      if (this.platter_id !== undefined) {
        this.listQuery.platter_id = this.platter_id
      }
      queryAccount(this.listQuery).then(res => {
        if (res.code == 200) {
          this.tableData = res.data
          this.total = res.total
        } else {
          this.$message.error(this.res.msg)
        }
      }).catch(err => {
        this.tableData = []
        this.total = 0
      })
    },
    delContent(id) {
      this.deleteDialogs.show = true
      this.deleteDialogs.deleteId = id
    },
    //删除按钮事件
    deleteEvents() {
      let params = {
        userId: localStorage.getItem("ID"),
        last_ip: sessionStorage.getItem("Ip"),
        id: this.deleteDialogs.deleteId,
      }
      deleteAccount(params).then(res => {
        if (res.code == 200) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
        this.queryAccountData()
      }).catch(err => {
        console.log("请求失败", err)
      })
    },
    //分页
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.queryAccountData()
    },
    handleCurrentChange(val) {
      this.listQuery.startSize = val
      this.queryAccountData()
    },
    //下拉动态table子组件
    alterCheckbok(key, conte) {
      this.key = key;
      this.colData.filter(i => {
        if (conte.indexOf(i.title) != -1) {
          i.istrue = false;
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout();
          });
        } else {
          i.istrue = true;
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout();
          });
        }
      });
    },
    //编辑添加表单关闭事件
    editFormClose() {
      this.editSubjects = false
      this.$nextTick(() => {
        this.editForm = this.$options.data.call(this).editForm
      })
    },
    qrCodeFormClose() {
      this.showQrCode = false
      this.$nextTick(() => {
        this.qrCodeForm = this.$options.data.call(this).qrCodeForm
      })
    },
    downloadQrCode(row) {
      this.showQrCode = true
      this.qrCodeForm = {
        school: row.school,
        username: row.username,
        qid: row.qid,
        account: row.phone
      }
      this.$nextTick(() => {
        var password = this.encryptOpenssl(row.password)
        var arr = {'account': row.phone, 'password': password}
        var text = JSON.stringify(arr)
        const canvas = document.getElementById('canvas')
        const ctx = canvas.getContext('2d')
        QRCode.toCanvas(canvas, text, error => {
          if (error) console.log(error)
        })
      })
    },
    encryptOpenssl(plaintext, key = '0123456789ABCDEF') {
      if (!key) key = "0123456789ABCDEF";
      let ivlen = 16; // AES-128-CBC 的 IV 长度固定为 16 字节
      let iv = crypto.randomBytes(ivlen);
      let cipher = crypto.createCipheriv('aes-128-cbc', Buffer.from(key, 'utf8'), iv);
      let ciphertextBytes = Buffer.concat([cipher.update(plaintext, 'utf8'), cipher.final()]);
      // Combine IV and ciphertext, then encode to base64
      let ciphertext = Buffer.concat([iv, ciphertextBytes]).toString('base64');
      // console.log("这是转换后的密码", ciphertext)
      return ciphertext;
    },
    goToGanKao(uid) {
      if (uid === 0 || uid.length <= 1) {
        this.$message.info("该学生未注册")
        return
      }
      this.reportUrl = `https://colorful2.gankao.com/p-account/statistics/student?gankaoUID=${uid}`;
      this.reportVisible = true
    },
    getAccountOptionControl() {
      getAccountOptions().then(res => {
        this.accountOptions = res.data
      })
    },
    toPassOn() {
      this.loadFormVisible = true
      this.exchangeForm.type = 1
    },
    toWithDraw() {
      this.loadFormVisible = true
      this.exchangeForm.type = 2
    },
    exchangeFormClose() {
      this.$nextTick(() => {
        this.$refs.exchangeForm.resetFields();
        this.loadFormVisible = false
      })
    },
    toExchange() {
      this.$refs.exchangeForm.validate(valid => {
        if (valid) {
          exchangePhoneAccount(this.exchangeForm).then(res => {
            this.$message.success(res.msg)
            this.queryAccountData()
            this.loadFormVisible = false
            this.getAccountOptionControl()
          })
        } else {
          return false;
        }
      });
    }
  }
}
</script>

<style scoped lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}

.avatar {
  width: 80px;
  height: 80px;
  display: block;
}

.qrcode_box {
  display: flex;
  justify-content: center;
  align-items: center;

  .qrcode {
    width: 270px !important;
    height: 270px !important;
  }
}

.flex_center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.col {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid gray;
  width: 270px;
  padding-bottom: 4px;
  padding-top: 5px;
}
</style>

<style scoped>
/* 添加一些基本的样式 */
.modal {
  position: fixed;
  z-index: 1050;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fefefe;
  padding: 20px;
  border-radius: 5px;
  position: relative;
  width: 80%;
  height: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
</style>

